// API列表
//创建数据源
window.addEventListener('load', function () {
    // 头部
    let nav_list = document.querySelectorAll('#navs li a');
    // 遍历li
    nav_list.forEach(function (v) {
        v.addEventListener('mouseover', function () {
            nav_list.forEach(function (j) {
                j.className = ''
            })
            v.className = 'active'
        });
        v.addEventListener('mouseout', function () {
            v.className = ""
        })

    })
    // 创建数据库
    let Api_list = [{ name: "全部", keyword: "全部", isBold: false },
    { name: "生活服务", keyword: "居家指南", isBold: false },
    { name: "金融科技", keyword: "理财投资", isBold: false },
    { name: "交通地理", keyword: "交通状况", isBold: false },
    { name: "充值缴费", keyword: "话费充值", isBold: false },
    { name: "数据智能", keyword: "大数据统计", isBold: false },
    { name: "企业工商", keyword: "企业资讯", isBold: false },
    { name: "应用开发", keyword: "应用管理", isBold: false },
    { name: "电子商务", keyword: "会议", isBold: false },
    { name: "吃喝玩乐", keyword: "指南分享", isBold: false },
    { name: "文娱视频", keyword: "娱乐资讯", isBold: false },
    { name: "免费接口大全", keyword: "接口类型", isBold: false },
    { name: "短信", keyword: "号码", isBold: false },
    { name: "汽车", keyword: "热门推荐", isBold: false },
    { name: "核验", keyword: "ID", isBold: false },
    { name: "最新发布", keyword: "资讯", isBold: false },
    { name: "API私有化部署", keyword: "找你想要的", isBold: false }];
    // 遍历数据拼接结构
    Api_list.forEach(function (v) {
        // 创建li标签
        let li = document.createElement('li');
        // 给li标签添加属性
        li.setAttribute('keyword', v.keyword);
        // 给li添加内容
        li.innerText = v.name;
        //给Api_ul添加新元素
        Api_ul.appendChild(li)
    })
    //渲染搜索框内容
    let lis = document.querySelectorAll('li');
    let Api_name = document.getElementById('Api_name');
    let Api_keyword = document.getElementById('Api_keyword');
    // 遍历li
    lis.forEach(function (v) {
        // 给li注册事件
        v.addEventListener('click', function () {
            // 获取当前li的内容和keyword
            let cont = this.innerText;
            let keys = this.getAttribute('keyword');
            Api_name.innerText = cont
            Api_keyword.placeholder = keys
            // 给当前li清除citive
            lis.forEach(function (k) {
                k.className = ""
            })
            //给当前li添加active
            this.className = "active"
        })
    })
    // API列表
    // 创建数据源
    let Api_main = [
        { special: false, imgUrl: "./Imgs/API_01.jpg", title: "2021出行防疫政策指南", price: "免费" },
        { special: true, imgUrl: "./Imgs/API_02.jpg", title: "身份证实名认证", price: "￥0.2000/次" },
        { speccial: false, imgUrl: "./Imgs/API_03.jpg", title: "天气预报", price: "免费" },
        { special: true, imgUrl: "./Imgs/API_04.jpg", title: "银行卡四元素校验", price: "￥0.3360/次" },
        { special: true, imgUrl: "./Imgs/API_05.jpg", title: "短信API服务", price: "￥0.0400/次" },

        // 第二行
        { special: false, imgUrl: "./Imgs/API_01.jpg", title: "2021出行防疫政策指南", price: "免费" },
        { special: true, imgUrl: "./Imgs/API_02.jpg", title: "身份证实名认证", price: "￥0.2000/次" },
        { speccial: false, imgUrl: "./Imgs/API_03.jpg", title: "天气预报", price: "免费" },
        { special: true, imgUrl: "./Imgs/API_04.jpg", title: "银行卡四元素校验", price: "￥0.3360/次" },
        { special: true, imgUrl: "./Imgs/API_05.jpg", title: "短信API服务", price: "￥0.0400/次" },
        // 第三行
        { special: false, imgUrl: "./Imgs/API_01.jpg", title: "2021出行防疫政策指南", price: "免费" },
        { special: true, imgUrl: "./Imgs/API_02.jpg", title: "身份证实名认证", price: "￥0.2000/次" },
        { speccial: false, imgUrl: "./Imgs/API_03.jpg", title: "天气预报", price: "免费" },
        { special: true, imgUrl: "./Imgs/API_04.jpg", title: "银行卡四元素校验", price: "￥0.3360/次" },
        { special: true, imgUrl: "./Imgs/API_05.jpg", title: "短信API服务", price: "￥0.0400/次" },
        // 第四行
        { special: false, imgUrl: "./Imgs/API_01.jpg", title: "2021出行防疫政策指南", price: "免费" },
        { special: true, imgUrl: "./Imgs/API_02.jpg", title: "身份证实名认证", price: "￥0.2000/次" },
        { speccial: false, imgUrl: "./Imgs/API_03.jpg", title: "天气预报", price: "免费" },
        { special: true, imgUrl: "./Imgs/API_04.jpg", title: "银行卡四元素校验", price: "￥0.3360/次" },
        { special: true, imgUrl: "./Imgs/API_05.jpg", title: "短信API服务", price: "￥0.0400/次" }
    ]

    // 保存一个html变量
    let Api_mainHtml = ""
    // 遍历
    Api_main.forEach(function (v) {
        // 拼接结构
        Api_mainHtml += `<li class="rel">
            <span class="tips ${v.special ? 'on' : ''}">企业专用</span>
            <div class="API-box">
                <a href="#">
                    <img src=${v.imgUrl} alt="">
                        <p class="API-box-main">${v.title}</p>
                        <p class="${v.price == '免费' ? 'gre' : 'red'}">${v.price}</p>
                </a>
            </div>
            <a href="" class="link">申请数据</a>
        </li>`

    })
    // 把拼接好的添加到ul
    let Api_mainul = document.getElementById('Api-box');
    Api_mainul.innerHTML = Api_mainHtml;
    // 分页器点击
    let pagelist = document.querySelectorAll('.page-list a');
    pagelist.forEach(function (v) {
        v.addEventListener('click', function () {
            pagelist.forEach(function (vv) {
                vv.className = ''
            })
            v.className = "active"
        })
    })
})
